<template>
  <div class="container">
    <el-card>
      <div slot="header" class="line" style="width: 40px;border-top: 3px solid #000;margin-bottom: 10px;"></div>
      <div style="margin: 15px 0;text-align:left;font-size: 28px; font-weight: bold;" slot="header" v-if="info.level==1">你好，{{stuName}}，您的能力评估结果如下:</div>
      <div style="margin: 15px 0;text-align:left;font-size: 28px; font-weight: bold;" slot="header" v-else>你好，{{info.name}}，您的能力评估结果如下:</div>
      <div style="text-align:left;font-size: 16px;color: gray;" slot="header" v-if="info.level !== 0">注：该结果根据学业成绩和课堂表现得出</div>
      <div class="box">
        <div class="item">
          <div class="echarts" style="width: 500px; height: 400px; padding: 15px" ref="echarts" ></div>
          <div class="desc" style="width: 500px;background-color: pink;margin-left: 100px;">
            <el-collapse accordion v-model="activeNames" @change="handleChange">
              <el-collapse-item title="软件设计能力：" name="1">
                <div>能力说明：掌握不止一种高级程序设计语言和开发应用技术。具备编写出高质量的代码的能力。需要拥有解决问题的能力，针对问题进行理解、构思、计划、维护和重用，并且能做出正确的决策。</div>
                <div style="font-weight: bold;">能力得分：5000</div>
              </el-collapse-item>
              <el-collapse-item title="软件开发能力：" name="2">
                <div>能力说明：通常是指一个人或一个团队在开发软件时所需要的技能和能力。它是一个综合性的概念，包括语言编程、算法和数据结构、系统设计、测试等多个方面。</div>
                <div style="font-weight: bold;">能力得分：14000</div>
              </el-collapse-item>
              <el-collapse-item title="数据库开发与管理能力：" name="3">
                <div>能力说明：是指一个人或者一个团队在设计、开发和管理数据库时所需要的技能和能力。</div>
                <div style="font-weight: bold;">能力得分：28000</div>
              </el-collapse-item>
              <el-collapse-item title="软件测试能力：" name="4">
                <div>能力说明：在软件开发过程中，根据特定的测试计划和测试用例，对软件进行功能、性能、安全、兼容性等多方面的检验和验证，以发现软件中存在的缺陷、错误和不足之处，保证软件的质量和正确性。</div>
                <div style="font-weight: bold;">能力得分：26000</div>
              </el-collapse-item>
              <el-collapse-item title="项目管理能力：" name="5">
                <div>能力说明：项目经理或项目团队能够规划、组织、监控和控制项目过程，以合理地运用资源来达成项目目标的综合能力。</div>
                <div style="font-weight: bold;">能力得分：22000</div>
              </el-collapse-item>
              <el-collapse-item title="系统分析与管理能力：" name="6">
                <div>能力说明：对于特定的系统或组织进行分析、规划、设计、实施、测试和维护的能力。</div>
                <div style="font-weight: bold;">能力得分：23000</div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <div class="item">
        <div class="echarts" style="width: 500px; height: 400px; padding: 15px" ref="echarts1" ></div>
          <div class="desc" style="width: 500px;background-color: pink;margin-left: 100px;">
            <el-collapse accordion v-model="activeNames" @change="handleChange">
              <el-collapse-item title="测评速率：" name="7">
                <div>单位题量/测评时间 按百分比折合</div>
                <div>测评速率：{{ showRes[0] }}</div>
              </el-collapse-item>
              <el-collapse-item title="测评效率：" name="8">
                <div>正确题数/测评时间 按百分比折合</div>
                <div>测评速率：{{ showRes[1] }}</div>
              </el-collapse-item>
              <el-collapse-item title="平均分：" name="9">
                <div>各个测评维度的平均得分</div>
                <div>测评速率：{{ showRes[2] }}</div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <div class="item">
          <div class="echarts" style="width: 500px; height: 400px; padding: 15px" ref="echarts2" ></div>
          <div class="sort" style="width: 500px;margin-left: 100px;">
            <div>您的各项专业能力与平均专业能力对比</div>
            <div>①软件设计能力：</div>
            <div>②软件开发能力：</div>
            <div>③数据库开发与管理能力：</div>
            <div>④软件测试能力：</div>
            <div>⑤项目管理能力：</div>
            <div>⑥系统分析与管理能力：</div>
          </div>
        </div>
        <div class="item">
          <div class="echarts" style="width: 500px; height: 400px; padding: 15px" ref="echarts3" ></div>
          <div class="desc" style="width: 500px;margin-left: 100px;">
            <div>您的三项评估分数对比</div>
          </div>
        </div>

      </div>
    </el-card>
  </div>
</template>

<script>
import { reqShowRes } from '@/api/curriculum'
export default {
  name: "Comprehensive",
  mounted() {
    this.echartsInit();
    this.echartsInit2();
    this.echartsInit3();
/*   this.res = Object.values(this.showRes)
  console.log(this.res); */
    this.getShowRes()

  },
  data() {
    return {
      activeNames: [],
      showRes: [],
      // res: [],
      stuName: this.$route.query.stuName || '',
      info: JSON.parse(localStorage.getItem('userInfo'))
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    async getShowRes() {
      const { data: res } = await reqShowRes(this.$route.query.stuId)
      console.log(res)
      this.showRes = Object.values(res.data)
      console.log(this.showRes, 6668)
      this.echartsInit1();
    },
    echartsInit() {
      let myChart = this.$echarts.init(this.$refs.echarts);
      let option = {
        title: {
          text: "能力测评结果",
        },
        legend: {
          data: [ "学生能力"],
        },
        radar: [
        {
          // shape: 'circle',
          axisName: {
            color: 'black',
            fontSize: '60px'
        },
          color: 'blue',
          indicator: [
            { name: "系统分析与管理能力", max: 6500 },
            { name: "软件设计能力", max: 16000 },
            { name: "软件开发能力", max: 30000 },
            { name: "数据库开发与管理能力", max: 38000 },
            { name: "软件测试能力", max: 25000 },
            { name: "项目管理能力", max: 28000 },
          ],
        },
        ],
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [5000, 14000, 28000, 26000, 22000, 23000],
                name: "学生能力",
                itemStyle: {
                  normal: {
                    color: "gray",
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    echartsInit1() {
      let myChart = this.$echarts.init(this.$refs.echarts1);
      let option = {
        title: {
          text: "能力评估结果",
        },
        grid: {
          width: "80%",
        },
        xAxis: {
          type: "category",
          data: ["测评速率", "测评效率", "平均分"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.showRes,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: {
              normal: {
                color: "#BDCAE6",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    echartsInit2() {
      let myChart = this.$echarts.init(this.$refs.echarts2);
      let option = {
        title: {
          text: "能力分数分析",
        },
        legend: {
          data: ["我的得分", "平均分"],
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: ['软件设计能力','软件开发能力','数据库开发与管理能力','软件测试能力','项目管理能力','系统分析与管理能力'],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "我的得分",
            type: "bar",
            data: [95, 75, 88, 97, 95, 85],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            itemStyle: {
              normal: {
                color: "#BDCAE6",
              },
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
          {
            name: "平均分",
            type: "bar",
            data: [82.6, 65.9, 79.0, 86.4, 88.7, 75.2],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
              markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
            },
            itemStyle: {
              normal: {
                color: "#F4CBCE",
              },
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    echartsInit3() {
      let myChart = this.$echarts.init(this.$refs.echarts3);
      let option = {
        title: {
          text: '评估分数对比'
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["平均分", "我的分数", "最高分"],
        },
        
       
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["测评速率", "测评效率", "平均分"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "平均分",
            type: "line",
            data: [72.6, 55.9, 79.0, 86.4, 88.7, 75.2],
            itemStyle: {
              normal: {
                color: "#CDACB5",
              },
            },
          },
          {
            name: "我的分数",
            type: "line",
            data: [95, 75, 88, 97, 95, 85],
            itemStyle: {
              normal: {
                color: "#D2C2C2",
              },
            },
          },
          {
            name: "最高分",
            type: "line",
            data: [95, 85, 92, 97, 95, 88],
            itemStyle: {
              normal: {
                color: "gray",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.echarts {
  display: inline-block;
}
.box {
  /* margin-left: 150px; */
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item {
  width: 80%;
  margin-bottom: 15px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f7f0f0;
  box-shadow: 0px 0px 15px 0px rgba(224, 213, 213, 0.9);
}
.sort div {
  margin-bottom: 15px;
}
</style>